/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/inviteFriends.css';
const shareList = [
    { url: require("./img/inviteFriends/icon1.png"), name: "微信" },
    { url: require("./img/inviteFriends/icon2.png"), name: "朋友圈" },
    { url: require("./img/inviteFriends/icon3.png"), name: "QQ" },
    { url: require("./img/inviteFriends/icon4.png"), name: "复制链接" }
]
class inviteFriends extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            alertType: 0
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //切换弹框
    changeType(index) {
        this.setState({
            alertType: index
        })
    }
    //关闭弹框
    jumpClose() {
        console.log(111)
        this.setState({
            alertType: 0
        })
    }
    jumpDetail() {
        this.props.history.push({ pathname: 'myInvite' })
    }
    render() {
        const { alertType } = this.state
        return (
            <div className='inviteFriends'>
                <div style={{ background: "#fff" }}>
                    <Navbar onClick={this.goBack} title='邀请好友' ></Navbar>
                </div>
                <div className='scroll'>
                    <img className="iconRule" onClick={() => this.changeType(1)} src={require("./img/inviteFriends/iconRule.png")}></img>
                    <div className="title">
                        <span>得</span>
                        <span className="number">40</span>
                        <span>元红包</span>
                        <span className="number">88</span>
                        <span>积分</span>
                    </div>
                    <div className='btnList'>
                        <div className='flex-1' onClick={() => this.changeType(2)}></div>
                        <div className='flex-1' onClick={() => this.changeType(3)}></div>
                    </div>
                    <div className='btnListShare'>
                        <div className='flex-1' style={{ textAlign: "center" }} onClick={() => this.jumpDetail()}>18人</div>
                        <div className='flex-1' style={{ textAlign: "center" }} onClick={() => this.jumpDetail()}> 50人</div>
                    </div>

                </div>
                {
                    alertType === 1 ? this.renderRule() : alertType === 2 ? this.renderOpen() : alertType === 3 ? this.renderShare() : null
                }
            </div>
        )
    }
    renderRule() {
        return <div className="alert">
            <div className="main">
                <div className='closeIcon' onClick={() => this.jumpClose()}>
                    <img width='14' height='14' src={require("./img/inviteFriends/closeIcon.png")}></img>
                </div>
                <div>
                    <div className="titleName">活动规则</div>
                    <div className="ruleText">1.抽奖方式：通过转盘抽奖可获取红包，手机等奖励。 </div>
                    <div className="ruleText">2.奖品发放：抽中奖品后可在我的优惠券界面进行查看。</div>
                    <div className="ruleText">3.如有疑问，请联系客服，客服电话：99999999</div>
                    <div className="ruleText">4、活动最终解释权归XXXX公司所有。</div>
                </div>
            </div>
        </div>
    }
    renderOpen() {
        return <div className="alert">
            <div className="main">
                <div className='closeIcon' onClick={() => this.jumpClose()}>
                    <img width='14' height='14' src={require("./img/inviteFriends/closeIcon.png")}></img>
                </div>
                <div style={{ margin: "auto", textAlign: "center" }}>
                    <div className="titleName">提示</div>
                    <div className="titleCode">我的分享二维码</div>
                    <img className="codeImg" width='14' height='14' src={require("./img/inviteFriends/closeIcon.png")}></img>
                    <div>长按此图识别图中二维码</div>
                </div>
            </div>
        </div>
    }
    renderShare() {
        return <div className="alert">
            <div className="shareMain">
                <div className='shareTitle'>分享到</div>
                <div className='shareList'>
                    {
                        shareList.map((item, index) => {
                            return <div className='shareItem' key={index}>
                                <img src={item.url}></img>
                                <div>{item.name}</div>
                            </div>
                        })
                    }
                </div>
                <div className='shareClose' onClick={() => this.jumpClose()}>取消</div>
            </div>
        </div>
    }

}

export default inviteFriends;